{% extends "_layouts/examples.html" %}
{% block title %}Font metrics{% endblock %}

{% block content %}
<h1>
  <i class="p-icon--success"></i>
  <span class="u-visualise-font-metrics">Xx</span>
</h1>
<h2>
  <i class="p-icon--success"></i>
  <span class="u-visualise-font-metrics">Xx</span>
</h2>
<h3>
  <i class="p-icon--success"></i>
  <span class="u-visualise-font-metrics">Xx</span>
</h3>
<h4>
  <i class="p-icon--success"></i>
  <span class="u-visualise-font-metrics">Xx</span>
</h4>
<h5>
  <i class="p-icon--success"></i>
  <span class="u-visualise-font-metrics">Xx</span>
</h5>
<h6>
  <i class="p-icon--success"></i>
  <span class="u-visualise-font-metrics">Xx</span>
</h6>
<p>
  <i class="p-icon--success"></i>
  <span class="u-visualise-font-metrics">Xx</span>
</p>
<button class="p-button has-icon">
  <span class="u-visualise-font-metrics">
    Button with icon
  </span>
  <i class="p-icon--chevron-down">
  </i>
</button>
<button class="p-button has-icon">
  <i class="p-icon--plus">
  </i>
  <span class="u-visualise-font-metrics">
    Button with icon
  </span>
</button>
{% endblock %}
